<script setup lang="ts">
import { ref,onMounted } from 'vue';
import  { AxiosResponse } from "axios";
import { getHomeData } from "../../api";
import {HomeData} from "../../interface"
// interface HomeData {
//   tid: number;
//   tname: string;
//   tintro: string;
//   price: number;
//   timg: string;
// }
// 接口返回的数据结构
// interface HomeData[] {
//   banner: string;
//   list: Product[];
// }
const data = ref<any>(); // 存储接口数据

   const getData = async () => {
  try {
    const res: AxiosResponse<HomeData> = await getHomeData();
        console.log(res.data);
        
    data.value = res.data.data; // 将接口数据赋值给 data
  } catch (error) {
    console.error('请求失败:', error);
  }
};

onMounted(() => {
  getData();
});


</script>

<template>
    <div class="home">
        <div v-if="data" class="banner">
      <img :src="data.banner" alt="Banner" style="width: 100%;">
    </div>
        <div>
            <van-notice-bar
  left-icon="volume-o"
  text="一杯香茶叶 2018新茶明前龙井茶 200克装茶叶明前绿茶散装浓香礼盒装"/>
        </div>
        <div v-if="data?.list?.length > 0" class="product-list">
      <h3>推荐商品</h3>
      <ul class="product-grid">
        <li v-for="item in data.list" :key="item.tid" class="product-item">
          <img :src="'http://39.105.198.203:3001/' + item.timg" :alt="item.tname" class="product-img">
          <div class="card">
            <div>{{ item.tname }}</div>
            <!-- <p class="product-desc">{{ item.tintro }}</p> -->
            <div class="product-price">￥{{ item.price }}</div>
          </div>
          
        </li>
      </ul>
    </div>


    </div>
</template>

<style scoped>
/* .home{
  position: relative;
  height: 100%;
} */
.banner {
  margin-bottom: 0px;
}

.product-list {
  margin-top: 20px;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
 justify-content: space-around;

}
.card{
  display: flex;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
    min-height: 88px;
    flex-direction: column;
}
.product-item {
  display: flex;
  border: 1px solid #098212;
  padding:8px  15px;
  border-radius: 5px;
  width: calc(49% - 10px);
  box-sizing: border-box;
  background-color: #fff;
  transition: box-shadow 0.3s ease;
}

.product-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-img {
  width: 88px;
  height: 88px;
  border-radius: 6px;
}

.product-desc {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}

.product-price {
  color: red;
  font-weight: bold;
}

.no-data {
  color: #999;
  font-size: 16px;
}
</style>